<template>
  <div class="flex appMain">
    <div class="MyMenu box-shadow pad10 r20">
      <div
        class="item pointer"
        :class="activeIndex == 1 || active == 1 ? 'bgcw' : 'defaultBg'"
        @click="active = 1"
        @mouseenter="activeIndex = 1"
        @mouseleave="activeIndex = -1"
      >
        <div class="icon flex acenter">
          <el-image
            style="width: 30px; height: 30px"
            :src="GRZLA"
            v-show="activeIndex == 1 || active == 1"
          ></el-image>
          <el-image
            v-show="activeIndex != 1 && active != 1"
            style="width: 30px; height: 30px"
            :src="GRZL"
          ></el-image>
        </div>
        <div class="name r10 overShow">个人资料</div>
        <div class="icon2 flex acenter">
          <el-icon :color="activeIndex == 1 || active == 1 ? '' : 'gray'"
            ><ArrowRight
          /></el-icon>
        </div>
      </div>
      <div
        class="item pointer"
        :class="activeIndex == 2 || active == 2 ? 'bgcw' : 'defaultBg'"
        @click="active = 2"
        @mouseenter="activeIndex = 2"
        @mouseleave="activeIndex = -1"
      >
        <div class="icon flex acenter">
          <el-image
            style="width: 30px; height: 30px"
            :src="ZHAQA"
            v-show="activeIndex == 2 || active == 2"
          ></el-image>
          <el-image
            v-show="activeIndex != 2 && active != 2"
            style="width: 30px; height: 30px"
            :src="ZHAQ"
          ></el-image>
        </div>
        <div class="name r10 overShow">账户安全</div>
        <div class="icon2 flex acenter">
          <el-icon :color="activeIndex == 2 || active == 2 ? '' : 'gray'"
            ><ArrowRight
          /></el-icon>
        </div>
      </div>
    </div>
    <Infomation v-if="active == 1"></Infomation>
    <AccountSecurity v-if="active == 2"></AccountSecurity>
  </div>
</template>

<script setup name="Profile">
import UserAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
// import { getUserProfile } from "@/api/system/user";
import Infomation from "@/views/system/User/profile/Infomation";
import AccountSecurity from "@/views/system/User/profile/AccountSecurity";
import useUserStore from "@/store/modules/user.js";
import GRZL from "@/assets/images/Information/个人资料.svg";
import GRZLA from "@/assets/images/Information/个人资料a.svg";
import ZHAQ from "@/assets/images/Information/账户安全.svg";
import ZHAQA from "@/assets/images/Information/账户安全a.svg";
const userStore = useUserStore();
const userInfoData = computed(() => userStore.userInfo);
const activeTab = ref("userinfo");
const activeIndex = ref(-1);
const active = ref(1);
const userType = {
  1: "学员",
  2: "职员",
  3: "管理员",
};
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {},
});

function getUser() {
  //   getUserProfile().then(response => {
  //     state.user = response.data;
  //     state.roleGroup = response.roleGroup;
  //     state.postGroup = response.postGroup;
  //   });
}

getUser();
</script>
<style lang="scss" scoped>
.list-group-item {
  display: flex;
}
.MyMenu {
  display: flex;
  flex-direction: column;
  .item {
    margin-bottom: 10px;
    height: 48px;
    line-height: 48px;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 12px;
    padding: 0 20px;
    .name {
      margin-left: 10px;
    }
  }
}
.defaultBg {
  background-color: #f7f7f7;
}
</style>
